<template>
  <ul class="list" v-show="cities">
    <li class="item" v-for="(list,index) in letters"
        @click="handleClick"
        @touchstart.prevent="handleStart"
        @touchmove="handleMove"
        @touchend="handleEnd"
        :key="index"
        :ref="list"
    >
       {{list}}

    </li>
  </ul>
</template>

<script>
  const SPEED = 96;
  export default {
    data() {
      return {
         touchState:false,
          timer:null
      }
    },
    props:{
      cities:Object
    },
    computed:{
      letters(){
        let letters = [];
        for (let i in this.cities){
          letters.push(i)
        }
        return letters
      }

     },
    methods:{
      goBack(){
        this.$router.go(-1)
      },
      handleClick(e){
         this.$emit('change',e.target.innerText)
      },
      handleStart(){
        this.touchState = true
      },
      handleMove(e){
        if(this.touchState){
          if(this.timer){
            clearTimeout(this.timer);
          }
          this.timer = setTimeout(()=>{
            let startY = this.$refs['A'][0].offsetTop;
            let touchY = e.touches[0].clientY - SPEED; // 手指距离顶部的位置
            let index = Math.floor((touchY -startY )/20);
            if(index>=0 && index<this.letters.length){
              this.$emit('change',this.letters[index])
            }
          },10);

        }
      },
      handleEnd(){
        this.touchState = false;
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../common/stylus/variable.styl"
  .list
    display: flex
    flex-direction: column
    justify-content: center
    position: absolute
    top: 90px
    right: 0
    bottom: 0
    width: 20px
    .item
      line-height: 20px
      text-align: center
      color: #00bcd4
</style>

